//获取数据
data1 = [
  { xu: 1, lei: "时限监察", zhuang: "已完成" },
  { xu: 2, lei: "收费监察", zhuang: "已完成" },
  { xu: 3, lei: "证照信息监察", zhuang: "已完成" },
  { xu: 4, lei: "时限监察", zhuang: "已完成" },
  { xu: 5, lei: "行政审批监察", zhuang: "已完成" },
  { xu: 6, lei: "收费监察", zhuang: "已完成" },
  { xu: 7, lei: "行政审批监察", zhuang: "已完成" },
  { xu: 8, lei: "时限监察", zhuang: "已完成" },
  { xu: 9, lei: "证照信息监察", zhuang: "已完成" },
  { xu: 10, lei: "时限监察", zhuang: "已完成" },
  { xu: 11, lei: "收费监察", zhuang: "已完成" },
  { xu: 12, lei: "收费监察", zhuang: "已完成" },
  { xu: 13, lei: "证照信息监察", zhuang: "已完成" },
  { xu: 14, lei: "行政审批监察", zhuang: "已完成" },
  { xu: 15, lei: "时限监察", zhuang: "已完成" },
  { xu: 16, lei: "证照信息监察", zhuang: "已完成" },
  { xu: 17, lei: "行政审批监察", zhuang: "已完成" },
  { xu: 18, lei: "时限监察", zhuang: "已完成" },
  { xu: 19, lei: "证照信息监察", zhuang: "已完成" },
  { xu: 20, lei: "行政审批监察", zhuang: "已完成" },
];

//获取元素
var datalist1 = document.getElementById("data-list1");
var leftbutton1 = document.getElementById("leftbutton1");
var rightbutton1 = document.getElementById("rightbutton1");

//定义添加函数
var add2 = function () {
  const tr1 = document.createElement("tr");

  const td1 = document.createElement("td");
  td1.innerHTML = data1[o].xu;
  tr1.appendChild(td1);

  const td2 = document.createElement("td");
  td2.innerHTML = data1[o].lei;
  tr1.appendChild(td2);

  const td3 = document.createElement("td");
  td3.innerHTML = data1[o].zhuang;
  tr1.appendChild(td3);

  const td6 = document.createElement("td");
  td6.innerHTML =
    "<button>" + "提交" + "</button>" + "<button>" + "申诉" + "</button>";
  tr1.appendChild(td6);

  datalist1.appendChild(tr1);
};

//功能实现
//数据数小于页面
if (data1.length < 8) {
  for (var o = 0; o < data1.length; o++) {
    add2();
  }
}
//数据数大于页面，但可取整
else if (data1.length % 8 == 0) {
  //初始化
  for (var o = 0; o < 8; o++) {
    add2();
  }

  //点击上一页
  leftbutton1.onclick = function () {
    if (o > 8) {
      datalist1.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "类型" +
        "</th>" +
        "<th>" +
        "状态" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      o = o - 16;
      for (var n = o + 8; o < n; o++) {
        add2();
      }
    } else {
      alert("已到首页");
    }
  };

  //点击下一页
  rightbutton1.onclick = function () {
    if (o < data1.length) {
      datalist1.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "类型" +
        "</th>" +
        "<th>" +
        "状态" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      for (var m = o + 8; o < m; o++) {
        add2();
      }
    } else {
      alert("已到尾页");
    }
  };
}
//数据数大于页面，但不可取整
else {
  //初始化
  for (var o = 0; o < 8; o++) {
    add2();
  }

  //点击上一页
  leftbutton1.onclick = function () {
    if (o == data1.length) {
      datalist1.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "类型" +
        "</th>" +
        "<th>" +
        "状态" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      o = o - 8 - (data1.length % 8);
      for (var n = o + 8; o < n; o++) {
        add2();
      }
    } else if (o > 8) {
      datalist1.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "类型" +
        "</th>" +
        "<th>" +
        "状态" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      o = o - 16;
      for (var n = o + 8; o < n; o++) {
        add2();
      }
    } else {
      alert("已到首页");
    }
  };

  //点击下一页
  rightbutton1.onclick = function () {
    if (data1.length - o == data1.length % 8) {
      datalist1.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "类型" +
        "</th>" +
        "<th>" +
        "状态" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      for (var m = data1.length % 8; o - data1.length < m; o++) {
        add2();
      }
    } else if (o == data1.length) {
      alert("已到尾页");
    } else {
      datalist1.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "类型" +
        "</th>" +
        "<th>" +
        "状态" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      for (var m = o + 8; o < m; o++) {
        add2();
      }
    }
  };
}
